const c = document.querySelector("#rug");
const ctx = c.getContext("2d");

c.style.width = c.width = window.innerWidth;
c.style.height = c.height = window.innerHeight;

// Определите параметры шестиугольника
const hexRadius = 5; // Радиус шестиугольника
const hexHeight = Math.sqrt(3) * hexRadius; // Высота шестиугольника

const palette = ["#003049", "#d62828", "#f77f00", "#fcbf49", "#eae2b7"];

// 创建一个函数，用于创建一个指定宽度和高度的canvas元素，并返回其2D上下文
const makeCtx = (w, h) => {
  // 创建一个canvas元素
  const c = document.createElement("canvas");
  // 获取canvas元素的2D上下文
  const ctx = c.getContext("2d");
  // 设置canvas元素的宽度和高度
  c.width = w;
  c.height = h;

  // 返回canvas元素的2D上下文
  return ctx;
};

// 绘制六边形函数
function drawHexagon(x, y, color, ctx) {
  // 开始绘制路径
  ctx.beginPath();
  // 循环6次，绘制六边形
  for (let i = 0; i < 6; i++) {
    // 计算每个顶点的角度
    const angle = Math.PI / 2 + (Math.PI / 3) * i;
    // 计算每个顶点的x坐标
    const xOffset = x + hexRadius * Math.cos(angle);
    // 计算每个顶点的y坐标
    const yOffset = y + hexRadius * Math.sin(angle);
    // 如果是第一个顶点，则移动到该点
    if (i === 0) {
      ctx.moveTo(xOffset, yOffset);
    } else {
      // 否则，绘制一条线到该点
      ctx.lineTo(xOffset, yOffset);
    }
  }
  // 关闭路径
  ctx.closePath();
  // 设置填充颜色
  ctx.fillStyle = color;
  // 填充六边形
  ctx.fill();
  // 如果需要，可以绘制边框
  // ctx.stroke();
}

// 绘制TruchetTile函数
function drawTruchetTile(x, y, variation, ctx) {
  // 定义圆的半径
  const circle = hexRadius / 3;

  // 如果variation为0
  if (variation === 0) {
    // 绘制六边形
    drawHexagon(x, y, palette[0], ctx);

    // 设置填充颜色
    ctx.fillStyle = palette[1];

    // 定义角度
    const angle = Math.PI / 3;

    // 绘制三角形
    ctx.beginPath();
    ctx.moveTo(
      x + Math.cos(angle) * hexRadius,
      y + Math.sin(angle) * hexRadius
    );
    ctx.lineTo(
      x + Math.cos(angle + Math.PI) * hexRadius,
      y + Math.sin(angle + Math.PI) * hexRadius
    );
    ctx.lineTo(
      x + hexRadius + Math.cos(angle + Math.PI) * hexRadius,
      y - hexRadius + Math.sin(angle + Math.PI) * hexRadius
    );
    ctx.lineTo(
      x + hexRadius + Math.cos(angle) * hexRadius,
      y - hexRadius + Math.sin(angle) * hexRadius
    );
    ctx.fill();

    // 绘制圆
    ctx.fillStyle = palette[1];

    ctx.beginPath();
    ctx.arc(x - hexRadius * 0.87, y + hexRadius * 0.5, circle, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = palette[0];

    ctx.beginPath();
    ctx.arc(x + hexRadius * 0.87, y - hexRadius * 0.5, circle, 0, Math.PI * 2);
    ctx.fill();
    // 如果variation为1
  } else if (variation === 1) {
    // 绘制六边形
    drawHexagon(x, y, palette[0], ctx);

    ctx.fillStyle = palette[1];

    for (let i = 0; i < 3; i++) {
      // 绘制三个圆
      const angle = Math.PI / 6 + (Math.PI / 1.5) * i;

      ctx.beginPath();
      ctx.arc(
        x + Math.cos(angle) * hexRadius,
        y + Math.sin(angle) * hexRadius,
        circle,
        0,
        Math.PI * 2
      );
      ctx.fill();
    }
  } else if (variation === 2) {
    // 如果variation为2
    drawHexagon(x, y, palette[4], ctx);
    // 绘制六边形

    ctx.fillStyle = palette[0];
    // 设置填充颜色

    ctx.beginPath();
    // 绘制圆
    ctx.arc(x, y, circle, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = "destination-in";
  // 设置合成操作

  drawHexagon(x, y, "red", ctx); // Белый фон шестиугольника

  ctx.globalCompositeOperation = undefined;
}

const tile0Ctx = makeCtx(hexHeight, hexRadius * 2);
drawTruchetTile(hexHeight / 2, hexRadius, 0, tile0Ctx);

const tile1Ctx = makeCtx(hexHeight, hexRadius * 2);
drawTruchetTile(hexHeight / 2, hexRadius, 1, tile1Ctx);

const tile2Ctx = makeCtx(hexHeight, hexRadius * 2);
drawTruchetTile(hexHeight / 2, hexRadius, 2, tile2Ctx);

const drawGrid = (c, r, cols, rows, get) => {
  // 遍历行
  for (let row = r; row < rows; row++) {
    // 遍历列
    for (let col = c; col < cols; col++) {
      // 计算每个六边形的x坐标
      const x = Math.floor(col * hexHeight + (row % 2) * hexRadius * 0.85);
      // 计算每个六边形的y坐标
      const y = Math.floor(row * (hexRadius * 1.5));
      // 生成随机数
      const variation = Math.floor(Math.random() * 2); // Случайный вариант

      // 重置画布变换
      ctx.resetTransform();
      // 平移画布
      ctx.translate(x + hexHeight / 2, y + hexRadius);

      // 计算旋转角度
      const angle = col % 2 ? (row % 2 ? 2 : 2) : row % 2 ? 2 : 4;

      // 定义六边形图片
      const tiles = [
        tile0Ctx.canvas,
        tile1Ctx.canvas,

        tile1Ctx.canvas,
        tile2Ctx.canvas,
        tile2Ctx.canvas,
      ];

      // 获取当前六边形的值
      const s = get(col, row);
      // 计算熵
      const enthropy = Math.floor(s * tiles.length) % tiles.length;

      // 获取当前六边形的图片
      const tile = tiles[enthropy];

      // 旋转画布
      ctx.rotate((Math.PI / 3) * angle);
      // 绘制图片
      ctx.drawImage(tile, -hexHeight / 2, -hexRadius);
    }
  }
};

// 定义一个animate函数，用于动画
const animate = (time) => {
  // 请求下一帧动画
  requestAnimationFrame(animate);

  // 计算行数和列数
  const rows = Math.ceil(c.height / (1.5 * hexRadius));
  const cols = Math.ceil(c.width / hexHeight);
  // 定义边框和半边框
  const border = 10;
  const hborder = border / 2;
  // 定义图案
  const pattern = 7;

  // 绘制网格
  drawGrid(0, 0, cols, rows, (col, row) => 0.3);

  // 绘制网格
  drawGrid(
    2,
    2,
    cols - 2,
    rows - 2,
    (col, row) => 1 + Math.sin(col / 1) + (1 + Math.cos(row / 1))
  );

  // 绘制网格
  drawGrid(6, 6, cols - 6, rows - 6, (col, row) => 0);

  // 绘制网格
  drawGrid(8, 8, cols - 8, rows - 8, (col, row) => 0.7);

  // 绘制网格
  drawGrid(
    border,
    border,
    cols - border,
    rows - border,
    (col, row) => 1 + Math.sin(col / 5) + (1 + Math.cos(row / 5))
  );
};

animate(0);
